<!--
 * @Author: wjk
 * @Date: 2019-11-25 13:58:20
 * @LastEditors: wjk
 * @LastEditTime: 2019-11-25 14:58:47
 * @description: file content
 -->
<template>
  <view class="icon-line-box" :class="{'border-bottom': showBorder}" @click="menuClick">
    <image v-if="leftIcon" mode="aspectFit" class="leftIcon" :src="leftIcon"></image>
    <text>{{ title }}</text>
    <image v-if="rightIcon" class="rightIcon" :src="rightIcon"></image>
  </view>
</template>

<script>
export default {
  name: 'IconLine',
  props: {
    // 菜单标题
    title: {
      type: String,
      default: ''
    },
    // 是否显示下边框
    showBorder: {
      type: Boolean,
      default: true
    },
    // 左侧ICON
    leftIcon: {
      type: String,
      default: ''
    },
    // 右侧ICON 通常为箭头
    rightIcon: {
      type: String,
      default: '/static/images/mine/ic_mine_arror.png'
    }
  },
  data() {
    return {
    }
  },
  methods: {
    menuClick(e) {
      this.$emit('menuClick', this.title)
    }
  }
}
</script>

<style lang="scss" scoped>
.icon-line-box{
  position: relative;
  display: flex;
  align-items: center;
  height: 126rpx;
  font-size: 26rpx;
  .leftIcon{
    width: 36rpx;
    height: 40rpx;
    margin-right: 32rpx;
  }
  .rightIcon{
    width: 13rpx;
    height: 22rpx;
    position: absolute;
    right: 0;
    top: 52rpx;
  }
  &.border-bottom{
    border-bottom: 1px solid $color-border;
  }
}
</style>
